import { defineComponent, ref, toRefs } from 'vue'
import { message, Transfer } from 'ant-design-vue'
import PropTypes from '@/utils/PropTypes'
type T = {
  key: string
  title: string
  description: string
}
export default defineComponent({
  name: 'TransferCom',
  props: {
    keys: PropTypes.array<string>().def([]),
    mockData: PropTypes.array<T>().def([]),
    type: PropTypes.strOption<'checkbox' | 'radio'>().def('checkbox'),
  },
  emits: ['update:Keys'],
  setup(props, { emit }) {
    const { mockData, keys, type } = toRefs(props)
    const filterOption = (inputValue: string, option: T) => {
      return option.description.indexOf(inputValue) > -1
    }
    const handleChange = (
      keys: string[],
      direction: string,
      moveKeys: string[],
    ) => {
      console.log(keys, direction, moveKeys)
      if (type.value == 'radio' && keys.length > 1)
        return message.error('只能选择一个')
      emit('update:Keys', keys)
    }
    const handleSearch = (dir: string, value: string) => {
      console.log('search:', dir, value)
    }
    return () => (
      <div class="transfer-box">
        <Transfer
          v-model:target-keys={keys.value}
          data-source={mockData.value}
          show-search
          titles={['待选人员', '已选人员']}
          listStyle={{
            width: '100%',
            height: '300px',
          }}
          filter-option={filterOption}
          render={(item) => item.title}
          onChange={handleChange}
          onSearch={handleSearch}
        />
      </div>
    )
  },
})
